<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

      <title>ChatWeb</title>
      <link rel="stylesheet" href="/css/chatRoom.css" />
  </head>
  <body>
    <noscript>
      <h2>抱歉！您的浏览器不支持JavaScript</h2>
    </noscript>

    <div id="username-page">
        <div class="username-page-container">
            <h1 class="title">请输入用户名</h1>
            <form id="usernameForm" name="usernameForm">
                <div class="form-group">
                    <input type="text" id="name" placeholder="Username" autocomplete="off" class="form-control" />
                </div>
                <div class="form-group">
                    <button type="submit" class="accent username-submit">进入聊天室</button>
                </div>
            </form>
        </div>
    </div>

    <div id="chat-page" class="hidden">
        <div class="chat-container">
            <div class="chat-header">
                <h2>聊天窗口</h2>
            </div>
            <div class="connecting">
                Connecting...
            </div>
            <ul id="messageArea">

            </ul>
            <form id="messageForm" name="messageForm" nameForm="messageForm">
                <div class="form-group">
                    <div class="input-group clearfix">
                        <input type="text" id="message" placeholder="Type a message..." autocomplete="off" class="form-control"/>
                        <button type="submit" class="primary">发送</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="/js/chatRoom.js"></script>
  </body>
</html>